<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>返回</v-ons-back-button>
      </div>
      <div class="center">统计报表</div>
    </v-ons-toolbar>
    <div class="container">

      <div class="tab-bar">
        <div class="tab-item" :class="tabbarIndex == 1 ? 'active':''" @click="selectTabbar({item:1})">
          订单统计
        </div>
        <div class="tab-item" :class="tabbarIndex == 2 ? 'active':''" @click="selectTabbar({item:2})">
          收入统计
        </div>
      </div>

      <!-- 订单统计 -->
      <div class="tab-content" v-if="tabbarIndex == 1">
        <div class="info-group">
          <div class="info-group-item">
            <div class="info">
              <h3>今日订单量</h3>
              <p>0</p>
            </div>
            <div class="info">
              <h3>本周订单量</h3>
              <p>0</p>
            </div>
          </div>
          <div class="info-group-item">
            <div class="info">
              <h3>本月订单量</h3>
              <p>0</p>
            </div>
            <div class="info">
              <h3>累计订单量</h3>
              <p>0</p>
            </div>
          </div>
        </div>
        <div class="chart-group">
          <div class="title">
            <h3>近一周订单量曲线</h3>
          </div>
          <div>
            <ve-line :data="chartData" :extend="extend"></ve-line>
          </div>
        </div>

        <div class="chart-group">
          <div class="title">
            <h3>近一周订单量曲线</h3>
          </div>
          <div>
            <ve-line :data="chartData" :extend="extend"></ve-line>
          </div>
        </div>
      </div>


      <!-- 收入统计 -->
      <div class="tab-content" v-if="tabbarIndex == 2">
        <div class="info-group">
          <div class="info-group-item">
            <div class="info">
              <h3>今日收入金额</h3>
              <p>0</p>
            </div>
            <div class="info">
              <h3>本周收入金额</h3>
              <p>0</p>
            </div>
          </div>
          <div class="info-group-item">
            <div class="info">
              <h3>本月收入金额</h3>
              <p>0</p>
            </div>
            <div class="info">
              <h3>累计收入金额</h3>
              <p>0</p>
            </div>
          </div>
        </div>
        <div class="chart-group">
          <div class="title">
            <h3>近一周收入金额曲线</h3>
          </div>
          <div>
            <ve-line :data="chartData" :extend="extend"></ve-line>
          </div>
        </div>

        <div class="chart-group">
          <div class="title">
            <h3>近一月收入金额曲线</h3>
          </div>
          <div>
            <ve-line :data="chartData" :extend="extend"></ve-line>
          </div>
        </div>
      </div>
    </div>
  </v-ons-page>
</template>

<script>
  export default {
    data() {
      this.extend = {
        series: {
          label: {
            normal: {
              show: true,
            }
          }
        }
      }
      return {
        tabbarIndex: 1,
        actionSheetVisible: false,
        chartData: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
          ]
        }
      }
    },
    methods: {
      enterPage({path: path, actionSheet: actionSheet}) {
        if (actionSheet) {
          this.actionSheetVisible = false
        }
        this.$router.push({
          path: path
        });
      },
      selectTabbar({item: item}) {
        this.tabbarIndex = item;
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../assets/less/service/statistic-map.less";
</style>
